<template>
  <div class="posttable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addform addForm" v-if="form">
          <el-form label-position="top" ref="form" :model="form" :rules="rules">
            <el-row class="change">
              <el-col :span="5">
                <el-form-item label="入职公司" prop="company">
                  <el-input v-model.trim="form.company" placeholder="请输入入职公司"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="部门" prop="department">
                  <el-input v-model.trim="form.department" placeholder="请输入入职部门"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="customer" label="服务客户" style="margin-bottom: 10px;">
                  <el-select v-model="form.customer" placeholder="请选择服务客户" style="width: 274px" @change="postHandler">
                    <el-option v-for="(item,index) in customerNames" :key="index" :label="item.name"
                               :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="职位" prop="position">
                  <el-select v-model="form.position" placeholder="请选择职位">
                    <el-option v-for="(item,index) in positionlist" :key="index" :label="item"
                               :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model.trim="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="区域" prop="area">
                  <el-select placeholder="请选择地区" v-model="form.area">
                    <el-option v-for="(item,index) in areallist" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="联系方式" prop="phone" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.phone" placeholder="请输入联系方式"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="毕业时间" prop="graduationTime">
                  <el-date-picker
                    v-model="form.graduationTime"
                    type="month"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    placeholder="请选择入职时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职时间" prop="entryTime">
                  <el-date-picker
                    v-model="form.entryTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择入职时间"
                    :picker-options="pickerBeginDateBefore"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="到场时间" prop="admissionTime">
                  <el-date-picker
                    v-model="form.admissionTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择到场时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="试用期" prop="probationPeriod">
                  <el-input v-model.trim="form.probationPeriod" placeholder="请输入试用期">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="补助" prop="subsidy">
                  <el-input v-model.trim="form.subsidy" placeholder="请输入补助">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪资(单位(K))" prop="salary">
                  <el-input placeholder="请输入薪资上限" v-model.trim="form.salary">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪数" prop="salaryNum">
                  <el-input v-model.trim="form.salaryNum" placeholder="请输入薪数">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="招聘专员" prop="recommender">
                  <el-input v-model.trim="form.recommender" placeholder="请输入招聘专员">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="状态" prop="state">
                  <el-select v-model="form.state" placeholder="请选择状态" @change="statechange">
                    <el-option label="已入职" value="已入职"></el-option>
                    <el-option label="待入职" value="待入职"></el-option>
                    <el-option label="离职" value="离职"></el-option>
                    <el-option label="待离职" value="待离职"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1" v-if="stateflag">
                <el-form-item label="离职时间" prop="depatureTime">
                  <el-date-picker
                    v-model="form.depatureTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择离职时间"
                    :picker-options="pickerBeginDateAfter"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1" v-if="stateflag">
                <el-form-item label="离职状态" prop="quitState">
                  <el-select v-model="form.quitState" placeholder="请选择离职原因">
                    <el-option label="自离职" value="自离职"></el-option>
                    <el-option label="辞退" value="辞退"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="stateflag" :span="12">
                <el-form-item label="离职原因" prop="quitReason">
                  <el-input type="textarea" v-model.trim="form.quitReason" placeholder="请输入离职原因"
                            :autosize="{ minRows: 4}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="margin-top: 20px;">
              <el-button class="save" :disabled="savedis" @click="submitForm('form')">保存</el-button>
              <el-button class="canceL" @click="cancel('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
        <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'
  
  export default {
    name: "entryinfoedit",
    props: {
      currentData: {
        type: Object
      }
    },
    data() {
      return {
        customerNames: [],
        sexlist: ['男', '女'],
        positionlist: [],
        areallist: [],
        savedis: false,
        cusId: null,
        form: {},
        rules: {
          'name': [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          'sex': [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          'customer': [
            {required: true, message: '请选择服务客户名称', trigger: 'change'}
          ],
          'company': [
            {required: true, message: '请输入入职公司', trigger: 'blur'}
          ],
          'department': [
            {required: true, message: '请输入部门', trigger: 'blur'}
          ],
          'position': [
            {required: true, message: '请选择职位', trigger: 'change'}
          ],
          'area': [
            {required: true, message: '请选择区域', trigger: 'change'}
          ],
          'phone': [
            {required: true, message: "请输入联系方式", trigger: "blur"},
            {pattern: /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/, message: "请输入正确的联系方式", trigger: "blur"}
          ],
          'graduationTime': [
            {required: true, message: '请选择毕业时间', trigger: 'change'}
          ],
          'depatureTime': [
            {required: true, message: '请选择离职时间', trigger: 'change'}
          ],
          'state': [
            {required: true, message: '请选择状态', trigger: 'change'}
          ],
          'quitState': [
            {required: true, message: '请选择离职状态', trigger: 'change'}
          ],
          'quitReason': [
            {required: true, message: '请填写离职原因', trigger: 'blur'}
          ],
          'entryTime': [
            {required: true, message: '请选择入职时间', trigger: 'change'}
          ],
          'probationPeriod': [
            {required: true, message: '请输入试用期', trigger: 'blur'}
          ],
          'subsidy': [
            {required: true, message: '请输入补助', trigger: 'blur'}
          ],
          'salary': [
            {required: true, message: '请输入薪资', trigger: 'blur'},
            {pattern: /^\d{1,2}$/, message: '薪资为0-99的数字', trigger: 'blur'}
          ],
          'salaryNum': [
            {required: true, message: '请输入薪数', trigger: 'blur'},
            {pattern: /^\d{1,2}$/, message: '薪数为0-99的数字', trigger: 'blur'}
          ],
          'recommender': [
            {required: true, message: '请输入招聘专员的名称', trigger: 'blur'},
            {
              pattern: /^[\u4e00-\u9fa5]*$/, message: '招聘专员的名称为汉字', trigger: 'blur'
            }
          ]
        },
        stateflag: false,
        errordialogVisible: false,
        errorinfo: null,
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.form.depatureTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') > this.form.depatureTime
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            if (this.form.entryTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') < this.form.entryTime
            }
          }
        }
      }
    },
    created() {
      //获取客户名称下拉框数据
      axios.post(this.url + '/resumeUpload/getCustomerNames').then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      
      axios.post(this.url + '/entryquit/getDetail', {
        id: this.currentData.id + ''
      }).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.form = res.data.data;
          if (this.form.state == '待离职' || this.form.state == '离职') {
            this.stateflag = true;
          } else {
            this.stateflag = false;
          }
          this.postHandler1();
        }
      });
      //获取地区下拉框数据
      axios.get(this.url + "/demand/getAreas").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.areallist = res.data.data;
        }
      });
    },
    methods: {
      //状态变化
      statechange() {
        if (this.form.state == '待离职' || this.form.state == '离职') {
          this.stateflag = true;
        } else {
          this.stateflag = false;
        }
        this.form.depatureTime = '';
        this.form.quitState = '';
        this.form.quitReason = '';
      },
      //选择客户名称获取职位名称的下拉框数据
      postHandler() {
        this.cusId = '';
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id
          }
        }
        this.form.position = '';
        this.positionlist = [];
        axios.post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
          }
        });
      },
      postHandler1() {
        this.cusId = '';
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id
          }
        }
        this.positionlist = [];
        axios.post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
          }
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.savedis = true;
            axios.post(this.url + '/entryquit/upEntryDetail', this.form).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.message == 'success') {
                  this.savedis = false;
                  this.$emit('getlist')
                }
                if (res.data.message == "存在此人信息") {
                  this.savedis = false;
                  this.errorinfo = res.data.message;
                  document.documentElement.style.overflow = "hidden";
                  this.errordialogVisible = true;
                }
              }
            })
          }
        })
      },
      cancel(formName) {
        this.savedis = false;
        this.$refs[formName].resetFields();
        this.$emit('getlist');
      },
      //清除所有的校验信息
      resetFields(formName) {
        this.$refs[formName].resetFields();
      },
      errorinfoClose() {
        this.errorinfo = null;
        document.documentElement.style.overflow = "auto";
        this.errordialogVisible = false;
      }
    }
  }
</script>

<style scoped>
  .save {
    width: 150px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    margin-right: 43px;
    background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
  }
  
  
  .addform {
    color: #333 !important;
  }
  
  .save.is-disabled {
    color: #C0C4CC;
    cursor: not-allowed;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5;
  }
  
  .canceL {
    width: 150px;
    height: 40px;
    border: 1px solid #4e6ef5;
    font-size: 16px;
    font-weight: 500;
    color: #4e6ef5;
  }
</style>
